<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="领券中心" />
      <view class="coupon-center-container">
        <!-- 顶部标题 -->
        <!-- <view class="header-title">
          <text class="title-text">领券中心</text>
          <text class="subtitle-text">精选优惠券，等你来领</text>
        </view> -->

        <!-- 优惠券列表 -->
        <view class="coupon-list">
          <view
            v-for="(coupon, idx) in couponList"
            :key="idx"
            class="coupon-item"
            :class="{ claimed: coupon.claimed }"
          >
            <!-- 左侧：券值 -->
            <view class="coupon-left">
              <view class="coupon-value">
                <text class="currency">¥</text>
                <text class="amount">{{ coupon.discount_price }}</text>
              </view>
              <text class="condition">(满{{ coupon.small_price }}可用)</text>
            </view>

            <!-- 右侧：券详情 -->
            <view class="coupon-right">
              <view class="coupon-info">
                <text class="coupon-name">{{ coupon.name }}</text>
                <text class="validity"
                  >有效期: {{ formatTime(coupon.starttime) }} 至
                  {{ formatTime(coupon.endtime) }}</text
                >
              </view>
              <button
                class="claim-btn"
                :class="{ claimed: coupon.claimed == 1 }"
                :disabled="coupon.claimed == 1"
                @click="claimCoupon(coupon, idx)"
              >
                {{ coupon.claimed == 0 ? '未领取' : coupon.claimed == 1 ? '已领取' : '' }}
              </button>
            </view>
          </view>
        </view>

        <!-- 底部提示 -->
        <view class="footer-tip">
          <text class="tip-text">没有更多了</text>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { onShow } from '@dcloudio/uni-app'
  import { formatDateOnly, formatTime, formatTimeOnly, formatDateRange } from '@/utils/dateUtils.js'
  import { useRequest } from '@/api'
  const { API_DISCOUNT_INDEX_POST, API_DISCOUNT_CLAIM_POST } = useRequest()
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  // 优惠券数据
  const couponList = ref([
    // {
    //   id: 1,
    //   name: '新人专享券',
    //   amount: 20,
    //   condition: 100,
    //   startDate: '2025-06-16',
    //   endDate: '2025-07-16',
    //   claimed: false
    // },
    // {
    //   id: 2,
    //   name: '满减优惠券',
    //   amount: 50,
    //   condition: 200,
    //   startDate: '2025-06-16',
    //   endDate: '2025-07-16',
    //   claimed: false
    // },
    // {
    //   id: 3,
    //   name: '限时特惠券',
    //   amount: 30,
    //   condition: 150,
    //   startDate: '2025-06-16',
    //   endDate: '2025-07-16',
    //   claimed: true
    // }
  ])
  onShow(() => {
    getCouponList()
  })
  const getCouponList = async () => {
    let params = {
      page: 1,
      page_size: 10
    }
    couponList.value = []
    try {
      const res = await API_DISCOUNT_INDEX_POST(params)
      console.log('getCouponList', res)

      if (res.code === 1) {
        if (res.data.data.length > 0) {
          couponList.value = res.data.data
        } else {
          couponList.value = []
        }
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
      console.log('couponList', couponList.value)
    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
  const claimCoupon = async (coupon, idx) => {
    console.log('claimCoupon', coupon, idx)
    let id = coupon.id
    let params = {
      id: id
    }
    try {
      const res = await API_DISCOUNT_CLAIM_POST(params)
      console.log('claimCoupon', res)

      if (res.code === 1) {
        getCouponList()
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
<style></style>
